<template>
  <div></div>
</template>

<script>
export default {
  name: "chart_test",
  methods: {
    // 折线图、柱状图
    chart_init(queryJson, res, type) {
      let { messures, compare_from_date } = queryJson;
      if (compare_from_date) {
        this.chart_compare_line(queryJson, res, type);
      } else {
        // 测试数据
        res = this.lineData[0];

        let { series: xAxisArr, rows } = res.detailResult;

        // 前n项
        let { limit } = this.dialog_form;
        if (limit && limit < rows.length) {
          rows = rows.slice(0, limit);
        }

        this.num_init(queryJson, res);
        // x轴
        xAxisArr = xAxisArr.map(item => {
          return this.$moment(item).format("M-D");
        });
        this.seriesArr = [];
        this.handleLineData(messures, rows, xAxisArr, type);
        this.option = {
          backgroundColor: "#fff",
          title: {
            text: "",
            textStyle: {
              fontSize: 12,
              fontWeight: 400
            },
            left: "center",
            top: "5%"
          },
          legend: {
            data: this.legendList,
            show: true,
            type: "scroll",
            formatter: params => {
              let nameArr = params.split(" ");
              let _index = nameArr[0].charAt(nameArr[0].length - 1);
              let measureIndex = String.fromCharCode(65 + Number(_index));
              return measureIndex + " " + nameArr.slice(1).join(" ");
            }
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "#001529",
            textStyle: {
              color: "#fff"
            },
            padding: [10, 10],
            extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
            formatter: params => {
              let resHtml = "";
              params.map(param => {
                let { seriesName, data, color } = param;
                let nameArr = seriesName ? seriesName.split(" ") : [];
                let _index = nameArr[0].charAt(nameArr[0].length - 1);
                let name =
                  messures[_index].name + " " + nameArr.slice(1).join("");
                let measureIndex = String.fromCharCode(65 + Number(_index));
                resHtml += `<div class="tooltip-content">
                                <div class="name">
                                <span class="name-index" style="background-color: ${color}">${measureIndex}</span>${name}</div>
                                <div class="value">${data.value || "--"}</div>
                                </div>`;
              });
              return resHtml;
            }
          },
          grid: {
            left: "10%",
            top: "10%",
            right: "5%"
          },
          xAxis: {
            type: "category",
            boundaryGap: type === "line" ? false : true,
            data: xAxisArr
          },
          yAxis: {
            type: "value"
          },
          series: this.seriesArr
        };
        this.myChart.setOption(this.option, true);
        this.myChart.resize();
      }
    },
    chart_compare_line(queryJson, res, type) {
      res = this.tableCompareData;

      let xAxisArr = [];
      if (res.length > 1) {
        // x轴
        let res_0 = res[0],
          res_1 = res[1];
        let series_0 = res_0.detailResult.series;
        let series_1 = res_1.detailResult.series;
        series_0 = this.handle_xAxisArr(series_0);
        series_1 = this.handle_xAxisArr(series_1);
        this.num_init(queryJson, res_0);

        let { messures } = queryJson;

        // y轴
        this.seriesArr = [];
        this.legendList = [];
        let measureRes = [];
        res.map(item => {
          let series = this.handle_xAxisArr(item.detailResult.series);
          let measureObj = this.handleLineData(
            messures,
            item.detailResult.rows,
            series,
            type
          );
          measureRes.push(measureObj);
        });

        series_0.map((series, i) => {
          xAxisArr.push(series_0[i] + "/" + series_1[i]);
        });
        this.option = {
          backgroundColor: "#fff",
          legend: {
            data: this.legendList,
            show: true,
            type: "scroll",
            formatter: params => {
              let nameArr = params.split(" ");
              let _index = nameArr[0].charAt(nameArr[0].length - 1);
              let measureIndex = String.fromCharCode(65 + Number(_index));
              return measureIndex + " " + nameArr.slice(1).join(" ");
            }
          },
          title: {
            text: "",
            textStyle: {
              fontSize: 12,
              fontWeight: 400
            },
            left: "center",
            top: "5%"
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "#001529",
            textStyle: {
              color: "#fff"
            },
            padding: [10, 10],
            extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
            formatter: params => {
              // console.log(params);
              let obj = {},
                axisValueArr = params[0].axisValue.split("/");
              params.map(param => {
                let { seriesName, data, color } = param;
                if (!obj[seriesName]) {
                  obj[seriesName] = {};
                }
                if (data.name === axisValueArr[0]) {
                  obj[seriesName].firstDate = data;
                } else if (data.name === axisValueArr[1]) {
                  obj[seriesName].secondDate = data;
                }
                obj[seriesName].color = color;
              });
              let resHtml = `<div class="tooltip-content"><div class="name">指标及分组值</div><div class="value">${axisValueArr[0]}</div><div class="value">${axisValueArr[1]}</div></div>`;
              for (let i in obj) {
                let nameArr = i ? i.split(" ") : [];
                let _index = nameArr[0].charAt(nameArr[0].length - 1);
                let name =
                  messures[_index].name + " " + nameArr.slice(1).join("");
                let measureIndex = String.fromCharCode(65 + Number(_index));
                resHtml += `<div class="tooltip-content">
                            <div class="name">
                                <span class="name-index" style="background-color: ${
                                  obj[i].color
                                }">${measureIndex}</span>${name}
                            </div>
                            <div class="value">${obj[i].firstDate.value ||
                              "--"}</div>
                            <div class="value">${obj[i].secondDate.value ||
                              "--"}</div>
                            </div>`;
              }

              return resHtml;
            }
          },
          grid: {
            left: "10%",
            top: "10%",
            right: "5%"
          },
          xAxis: {
            type: "category",
            boundaryGap: type === "line" ? false : true,
            data: xAxisArr
          },
          yAxis: {
            type: "value"
          },
          series: this.seriesArr
        };
        this.myChart.setOption(this.option, true);
        this.myChart.resize();
      }
    },
    handleLineData(messures, rows, series, type) {
      let measureObj = {};

      for (let i = 0; i < rows.length; i++) {
        let obj = {},
          data = [];
        let { by_values, values } = rows[i];
        let name = by_values.join(" ");

        messures.map((measure, j) => {
          let event_name = "measure_" + j;
          if (!measureObj[event_name]) {
            measureObj[event_name] = {};
          }

          obj = {
            type,
            stack: `measure_${j}`,
            name: `measure_${j} ` + name
          };
          this.legendList.push({
            name: `measure_${j} ` + name
          });
          if (!measureObj[event_name][name]) {
            measureObj[event_name][name] = [];
          }
          data = [];
          values.map((value, k) => {
            data.push({
              value: value[j],
              name: series[k]
            });
            measureObj[event_name][name].push(value[j]);
          });
          obj.data = data;
          this.seriesArr.push(obj);
        });
      }
      return measureObj;
    }
  }
};
</script>

<style scoped>
</style>
